<template>
  <div>
    <van-nav-bar
    title="商品详情"
    :fixed=true
    left-arrow
     @click-left="onClickLeft"
    >
    </van-nav-bar>
    <div class="lun"><img :src="detaillist.pimg" alt=""></div>
    <div class="rong">
      <h2>{{detaillist.pname}}</h2>
      <span class="desc">{{detaillist.pdesc}}</span>
      <span class="ju">
        <van-count-down
  :time="30 * 60 * 60 * 1000"
  format="距离结束还剩DD 天 HH 时 mm 分 ss 秒"
/></span>
      <div class="sheng">
        <p>
          <span>{{ee}}</span>
          <span>剩余名额</span>
        </p>
        <p>
          <span>{{shen}}</span>
          <span>申请</span>
        </p>
      </div>
      <p class="hu">接收优质博主报价，可获得<em>0+</em>映币</p>
      <ul>
        <li>测评指引</li>
        <li>请注意悬赏要求是单篇哦</li>
        <li>不支持以下地区收货</li>
        <li>澳门特别行政区、台湾省、香港特别行政区</li>
      </ul>
      <h3><span>///</span> 商品详情 <span>///</span></h3>
      <img class="da" :src="detaillist.pimg" alt="">
      <img class="da" :src="detaillist.pimg" alt="">
      <img class="da" :src="detaillist.pimg" alt="">
      <img class="da" :src="detaillist.pimg" alt="">
    </div>
    <van-button v-tap="{methods:qing}" style="background: #FCDC01;border: 0;position: fixed;bottom: 0;left: 0;" type="primary" size="large">申请</van-button>
  </div>
</template>

<script>
  import * as api from '../api/getProlist'
  export default{
    name:'Ask',
    data(){
      return{
        detaillist:'',
        ee:parseInt(Math.random()*50),
        shen:parseInt(Math.random()*400),
      }
    },
    methods:{
      onClickLeft(){
        this.$router.go(-1)
      },
      qing(){
        this.$dialog.confirm({
          title: '博主入驻',
          message: '入驻之后才能发起申请，快去申请入驻吧~我们会在2个工作日内审核完毕'
        }).then(() => {
          // on confirm
          this.$router.push('/blogger');
        }).catch(() => {
          // on cancel
        });
      },

    },
    mounted(){
      window.scrollTo(0,0)
      window.addEventListener('scroll', this.handleScroll)
      console.log(this.$route.params.id)
      api.getDetail({id:this.$route.params.id}).then((data)=>{
      	this.detaillist=data.data.data
      })
    }
  }
</script>

<style scoped="">
  .van-icon-arrow-left{
    color: #bfbfbf;
    font-size: 24px;
  }
  .van-nav-bar__title{
    font-size: 20px;
  }
  .lun img{
    height: 340px;
    width: 100%;
    margin-top:-16px;
  }
  .rong{
    padding: 0 20px;
  }
  .rong h2{
    font-size: 24px;
  }
  .ju{
    font-size: 16px;
    color: #888;
  }
  .sheng{
    margin-top: 20px;
    display: flex;
  }
  .sheng p{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    height: 40px;
  }
  .sheng p:nth-child(1){
    border-right: 1px solid #AAAAAA;
  }
  .sheng p span:nth-child(1){
    font-size: 30px;
    margin-right: 10px;
  }
   .sheng p span:nth-child(2){
     color: #888;
   }
   .hu{
     font-size: 14px;
   }
   .hu em{
     color: #F3CB0A;
     font-style: normal;
   }
   ul li{
     border-bottom: 1px solid #888888;
     height: 50px;
     line-height: 50px;
     font-size: 16px;
   }
   h3{
     text-align: center;
     line-height: 60px;
     font-size: 16px;
   }
   h3 span{
     color: #888888;
   }
   .da{
     width: 100%;
     height: 400px;
   }
   .desc{
     display: block;
     font-size: 16px;
     line-height: 24px;
     margin-bottom: 20px;
   }
</style>
